<template>
  <view class="order">
    <!-- 获取顶部高度 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="navs">
      <navigator url="/pages/my/index" open-type="switchTab" hover-class="none">
        <u-icon name="arrow-leftward"></u-icon>
      </navigator>
      <view class="sear">
        <u-search
          placeholder="请搜索"
          v-model="keys"
          shape="round"
          :clearabled="true"
          :show-action="false"
          bgColor="white"
          color="#BFBFBF"
          @search="searchs"
          @clickIcon="searchMD"
        ></u-search>
      </view>
      <navigator
        url="/pages/cart/index"
        open-type="switchTab"
        hover-class="none"
      >
        <u-icon name="/static/cars.jpg"></u-icon>
      </navigator>
    </view>
    <view class="my-tab">
      <view
        class="my-tab-item"
        v-for="(item, index) in tabs"
        :key="index"
        :ref="`tab${item.name}Ref`"
        :class="{ active: item.name === activeItem }"
      >
        <view class="my-tab-text" @click="tabClick(item)">{{
          item.label
        }}</view>
      </view>
    </view>
    <view class="tabOnelist" v-if="activeItem == 'tabOne'">
      <view class="tabOneitem" v-for="(item, i) in farmlist" :key="i">
        <view class="tabOneitem_left" @click="godetail(item.id)">
          <img :src="item.url" alt="" />
        </view>
        <view class="tabOneitem_right">
          <view class="title">
            <text class="t1"> {{ item.title }}</text>
            <text class="t2"> {{ item.zt }}</text>
          </view>
          <view class="distance">
            <text class="distance1">下单: {{ item.time }}</text>
            <text class="distance1">数量: {{ item.num }}</text>
            <text class="distance1">实付: ¥ {{ item.price }}</text>
          </view>
          <view class="tag">
            <view class="tag_1" @click="goTabs(item.ranking)">{{
              item.ranking
            }}</view>
            <view class="tag_2">{{ item.tag2 }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="tabTwolist" v-if="activeItem == 'tabTwo'">
      <template v-if="farmlist.length > 0">
        <view class="tabOneitem" v-for="(item, i) in farmlist" :key="i">
          <view class="tabOneitem_left" @click="godetail(item.id)">
            <img :src="item.url" alt="" />
          </view>
          <view class="tabOneitem_right">
            <view class="title">
              <text class="t1"> {{ item.title }}</text>
              <text class="t2"> {{ item.zt }}</text>
            </view>
            <view class="distance">
              <text class="distance1">下单：{{ item.time }}</text>
              <text class="distance1">数量: {{ item.num }}</text>
              <text class="distance1">实付: ¥ {{ item.price }}</text>
            </view>
            <view class="tag">
              <view class="tag_1" @click="goTabs(item.ranking)">{{
                item.ranking
              }}</view>
              <view class="tag_2">{{ item.tag2 }}</view>
            </view>
          </view>
        </view>
      </template>
      <view class="tabTwoitem" v-else>
        <image src="../../static/order.jpg" mode="scaleToFill" />
        <view>您还没有相关订单</view>
        <view class="ord">没有找到订单？试试查看全部</view>
        <view>
          <u-button
            size="small"
            :style="{ marginTop: 10 + 'px' }"
            text="查看全部"
          >
          </u-button>
        </view>
      </view>
    </view>
    <view class="tabThreelist" v-if="activeItem == 'tabThree'">
      <view class="tabOneitem" v-for="(item, i) in farmlist" :key="i">
        <view class="tabOneitem_left" @click="godetail(item.id)">
          <img :src="item.url" alt="" />
        </view>
        <view class="tabOneitem_right">
          <view class="title">
            <text class="t1"> {{ item.title }}</text>
            <text class="t2"> {{ item.zt }}</text>
          </view>
          <view class="distance">
            <text class="distance1">下单: {{ item.time }}</text>
            <text class="distance1">数量: {{ item.num }}</text>
            <text class="distance1">实付: ¥ {{ item.price }}</text>
          </view>
          <view class="tag">
            <view class="tag_1" @click="goTabs(item.tag)">{{ item.tag }}</view>
            <view class="tag_2">{{ item.tag2 }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="tabFourlist" v-if="activeItem == 'tabFour'">
      <view class="tabOneitem" v-for="(item, i) in farmlist" :key="i">
        <view class="tabOneitem_left" @click="godetail(item.id)">
          <img :src="item.url" alt="" />
        </view>
        <view class="tabOneitem_right">
          <view class="title">
            <text class="t1"> {{ item.title }}</text>
            <text class="t2"> {{ item.zt }}</text>
          </view>
          <view class="distance">
            <text class="distance1">下单: {{ item.time }}</text>
            <text class="distance1">数量: {{ item.num }}</text>
            <text class="distance1">实付: ¥ {{ item.price }}</text>
          </view>
          <view class="tag">
            <view class="tag_1" @click="goTabs(item.tag3)">{{
              item.tag3
            }}</view>
            <view class="tag_2">{{ item.tag2 }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="tabFivelist" v-if="activeItem == 'tabFive'">
      <view class="tabOneitem" v-for="(item, i) in farmlist" :key="i">
        <view class="tabOneitem_left" @click="godetail(item.id)">
          <img :src="item.url" alt="" />
        </view>
        <view class="tabOneitem_right">
          <view class="title">
            <text class="t1"> {{ item.title }}</text>
            <text class="t2"> {{ item.zt }}</text>
          </view>
          <view class="distance">
            <text class="distance1">下单: {{ item.time }}</text>
            <text class="distance1">数量: {{ item.num }}</text>
            <text class="distance1">实付: ¥ {{ item.price }}</text>
          </view>
          <view class="tag">
            <view class="tag_1" @click="goTabs(item.tag1)">{{
              item.tag1
            }}</view>
            <view class="tag_2">{{ item.tag2 }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "order",
  components: {},
  data: () => ({
    keys: "",
    activeItem: "tabOne",
    tabs: [
      {
        name: "tabOne",
        label: "全部",
      },
      {
        name: "tabTwo",
        label: "待付款",
      },
      {
        name: "tabThree",
        label: "待收货/待使用",
      },
      {
        name: "tabFour",
        label: "待评价",
      },
      {
        name: "tabFive",
        label: "退款/售后",
      },
    ],
    farmlist: [
      {
        id: 1,
        url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2FPhoto%2FOriginalImages%2FMeishiCanyin%2Fshiwuyuanliao%2Fcaiyuanshucai_051117%2F201.jpg&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716623197&t=383a47629b2e4ff502db4184f53992f0",
        title: "新农人农庄【两大一小】亲子票",
        num: "1",
        price: "230.00",
        time: "2024年4月15日 10：45",
        ranking: "去使用",
        tag: "物流进度",
        tag1: "退款进度",
        tag2: "再来一单",
        tag3: "去评价",
        zt: "待使用",
      },
      {
        id: 2,
        url: "https://img95.699pic.com/xsj/0o/bs/q1.jpg%21/fh/300",
        title: "新农人农庄 草莓 5kg ",
        num: "1",
        price: "230.00",
        tag: "去使用",
        tag1: "黄陂区",
        time: "2024年4月15日 10：45",
        ranking: "去评价",
        tag1: "退款进度",
        tag2: "再来一单",
        tag3: "去评价",
        zt: "已关闭",
      },
      {
        id: 3,
        url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ivsky.com%2FPhoto%2FOriginalImages%2FMeishiCanyin%2Fshiwuyuanliao%2Fcaiyuanshucai_051117%2F201.jpg&refer=http%3A%2F%2Fimg.ivsky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716623197&t=383a47629b2e4ff502db4184f53992f0",
        title: "新农人农庄【两大一小】亲子票",
        num: "1",
        price: "230.00",
        time: "2024年4月15日 10：45",
        ranking: "物流进度",
        tag: "物流进度",
        tag1: "退款进度",
        tag2: "再来一单",
        tag3: "去评价",
        zt: "待使用",
      },
    ],
    statusBarHeight: 0,
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  mounted() {
    //必须放在mounted钩子函数最前面，不能放在调用其它方法后面，否则无效
    let that = this;
    //获取手机系统信息
    const info = uni.getSystemInfoSync();
    //设置状态栏高度
    that.statusBarHeight = info.statusBarHeight * 1.6;
    console.log(that.statusBarHeight, "that.statusBarHeight");
  },

  // 方法集合
  methods: {
    tabClick(item) {
      this.activeItem = item.name;
      // 触发滑动方法
    },
    goTabs(tabs) {
      console.log(tabs, "ss");
      switch (tabs) {
        case "物流进度":
          uni.redirectTo({
            url: "/packageA/order/logistics",
          });
          break;
        case "去使用":
          uni.redirectTo({
            url: "/packageA/order/codes",
          });
          break;
        case "去评价":
          uni.redirectTo({
            url: "/packageA/order/assess/index",
          });
          break;
        case "评价":
          uni.redirectTo({
            url: "/packageA/order/assess/index",
          });
          break;
        case "退款进度":
          uni.redirectTo({
            url: "/packageA/order/refund",
          });
          break;
        default:
          break;
      }
    },
    godetail(id) {
      uni.redirectTo({
        url: `/packageA/order/detail?id=${id}`,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.order {
  font-family: "Poppins";
  background-color: #f9f9f9;
  position: absolute;
  width: 100%;
  height: 100%;

  .navs {
    // padding-top: 120rpx;
    margin: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .sear {
      width: 80%;
    }
  }
  .my-tab {
    width: 100%;
    height: 75rpx;
    line-height: 75rpx;
    // padding: 0rpx 10rpx;
    display: flex;
    overflow-x: auto; /* 横向滚动 */
    white-space: nowrap; /* 防止换行 */

    .my-tab-item {
      height: 75rpx;
      text-align: center;
      flex: 1;
      font-size: 26rpx;

      &.active {
        color: #333333;

        .my-tab-text {
          position: relative;

          &::after {
            position: absolute;
            left: 50%;
            bottom: 0;
            content: "";
            width: 80rpx;
            height: 4rpx;
            background: linear-gradient(180deg, #f39c12 0%, #f39c12 100%);
            opacity: 1;
            border-radius: 2rpx;
            transform: translateX(-50%);
          }
        }
      }
    }
  }

  .tabOneitem {
    display: flex;
    height: 250rpx;
    padding: 15rpx;
    margin: 20rpx;
    background-color: white;
    border-radius: 20rpx;

    .tabOneitem_left {
      width: 200rpx;
      height: 200rpx;
      margin-right: 15rpx;
      border-radius: 10rpx;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .tabOneitem_right {
      flex: 1;
      .title {
        font-size: 24rpx;
        color: #4a4543;
        margin-bottom: 5rpx;
        display: flex;
        justify-content: space-between;
        .t2 {
          margin-right: 5%;
          color: #8d8683;
        }
      }
      .item_a {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;

        .img {
          width: 50rpx;
          height: 50rpx;
        }
        .score {
          font-size: 22rpx;
          color: #8d8683;
          margin-top: 10rpx;
          display: inline-block;
          margin-right: 20rpx;
        }
        .comment {
          font-size: 22rpx;
          display: inline-block;
          margin-right: 20rpx;
          color: #8d8683;
        }
        .tickets {
          font-size: 22rpx;
          color: #8d8683;
        }
      }
      .distance {
        display: flex;
        flex-direction: column;
        font-size: 22rpx;
        color: #8d8683;

        .distance1 {
          display: inline-block;
          margin: 10rpx 0;
        }
        .distance2 {
          flex: 1;
        }
      }

      .tag {
        display: flex;
        justify-content: flex-end;
        .tag_1 {
          padding: 2rpx 8rpx;
          color: #8d8683;
          border-radius: 15rpx;
          margin-right: 20rpx;
          font-size: 20rpx;
          text-align: center;
          height: 30rpx;
          line-height: 30rpx;
          color: #8d8683;
          border: 1px solid #8d8683;
        }
        .tag_2 {
          padding: 2rpx 8rpx;
          border-radius: 15rpx;
          margin-right: 20rpx;
          font-size: 20rpx;
          text-align: center;
          height: 30rpx;
          line-height: 30rpx;
          color: #f91c03;
          border: 1px solid #f91c03;
        }
      }
    }
  }

  // 订单
  .tabTwoitem {
    width: 95%;
    margin: 20rpx auto;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20rpx;
    image {
      width: 300rpx;
      height: 300rpx;
      margin: 20rpx 0;
    }
    .ord {
      color: #8d8683;
    }
  }
}
</style>